<template>
  <div class="top">
    xxx manager system
  </div>
  <div class="bottom">
    <div class="sider">
      <ul>
        <li v-for="menu in menus" :key="menu.id">
          <template v-if="menu.subs === null">
            <router-link :to="menu.url">{{menu.title}}</router-link>
          </template>
          <template v-else>
            <span v-text="menu.title" @click="showSubFun(menu)"></span>
            <ul v-show="menu.showSub">
              <li v-for="sub in menu.subs" :key="sub.id">
                <router-link :to="sub.url">{{sub.title}}</router-link>
              </li>
            </ul>
          </template>
        </li>
      </ul>
    </div>
    <div class="content">
      <router-view/>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data(){
    return{
      menus:[],
    }
  },
  mounted() {
   this.getMenus();
  },
  methods:{
    showSubFun(menu){
      menu.showSub = !menu.showSub;
    },
    getMenus(){
      this.$axios.get('/api/menu/list')
      .then(data=>{
        if(data.code == 0){
          let menus = data.menus;
          menus.forEach(item =>{
            if(item.subs === null || item.subs.length == 0){
              item.showSub = false;
            }
          })
          this.menus = menus;
        }
      })
    }
  }
}
</script>

<style scoped>
.top{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 68px;
  border: #2c3e50 solid 1px;
}
.bottom{
  display: flex;
}
.sider{
  position: absolute;
  top: 68px;
  left: 0px;
  bottom: 0px;
  width: 180px;
  border: #2c3e50 solid 1px;
}
.sider li{
  list-style: none;
  margin-left:-3rem;
}
.content{
  position: absolute;
  top: 68px;
  left: 180px;
  right: 0px;
  bottom: 0px;
  border: #2c3e50 solid 1px;
}
</style>
